<!DOCTYPE html>
<html lang="en">

<head>
    <title>选择挑战房间</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="../../css/public.css">
    <style>
        .register_bg {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: url('../../images/reg/bg.png') center no-repeat;
            background-size: 100%;
            z-index: 1;
        }




        .home_zhangdui_nav {
            overflow: hidden;
            background: #021349 url('../../images/reg/back.png') 10px center no-repeat;
            background-size: .7rem;
        }
        .roomlist{
            width: 90%;
            margin: 0 auto;
            margin-top: 70px
        }
        .roomlist>div{
            
            
            margin: auto;
            height: 75px;
            background: url(../../images/home/bg_room_jc.png) center 0 no-repeat;
            background-size: 100% 85%;
            padding: 7px 0;
        }
        .roomlist>div>.name{
            /* width: 100%; */
            display: flex;
            color: #BFC1F2;
            margin-bottom: 5px;
        }
        .clanName1{
            flex: 3;
            text-align: right;
            font-size: .4rem;
            height: 40px;
            line-height: 40px;
        }
        .vs{
            margin: 0 10px;
            flex: 1;
            text-align: center;
            background:url(../../images/home/icon_room_vs.png) center no-repeat;
            background-size: 50%; 
            height: 40px;
            line-height: 40px;
        }
        .clanName2{
            flex: 3;
            height: 40px;
            line-height: 40px;
            /* text-align: left; */
        }
        .time{
            float: left;
            width: 60%;
            text-align: right;
            color: #FFCD29;
            font-size: .35rem;
        }
        .time img{
            width: .35rem;
        }
        .onlinePeople{
            float: right;
            text-align: right;
            margin-right: 5%;
            color: #40477E;
            font-size: .35rem;
        }
        .peopleNum{
            color: #6A72A4;
            font-size: .35ren;
        }
    </style>
</head>

<body>

    <div class="register_bg">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            选择竞猜房间
            <!-- <a href="./tradingRecord.html"> -->
            <!-- </a> -->
        </div>
        
        <div class="roomlist">
           <!-- <div class="room">
                <div class="name"> 
                    <div class="clanName1">OMG</div>
                    <div class="vs"></div>
                    <div class="clanName2">霹雳烽火狼</div>
                </div>
                <div class="timePeople">
                    <div class="time"><img src="../../images/home/icon_time.png" alt=""> <span class="timeNum">120分60秒</span></div>
                    <div class="onlinePeople"><span class="peopleNum">11</span>/100</div>
                </div>
           </div>
           <div class="room">
                <div class="name"> 
                    <div class="clanName1">OMG</div>
                    <div class="vs"></div>
                    <div class="clanName2">霹雳烽火狼</div>
                </div>
                <div class="timePeople">
                    <div class="time"><img src="../../images/home/icon_time.png" alt=""> <span class="timeNum">120分60秒</span></div>
                    <div class="onlinePeople"><span class="peopleNum">11</span>/100</div>
                </div>
           </div> -->
        </div>
        
    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script>
        $(function () {
            let path = window.location.href
            let raceId = path.split('?')[1].split('=')[1]
            console.log(raceId)
            
            $.post(raceRoomList,{raceId},res=>{
                let obj=res.obj
                console.log(res)
                obj.forEach((item,index) => {
                    //  $('.list a').eq(index).find('div').text(item.fdName)
                    //     let fdId=item.fdId
                    //     $('.list a').eq(index).find('img').click(function(){
                    //     window.location.href=`./chat.html?${fdId}`
                    //     })
                        let time = item.subtime
                            time =time.split('分')[0]+'分'
                            console.log(time)
                    let room=`<div class="room">
                <div class="name"> 
                    <div class="clanName1">${item.vs_a}</div>
                    <div class="vs"></div>
                    <div class="clanName2">${item.vs_b}</div>
                </div>
                <div class="timePeople">
                    <div class="time"><img src="../../images/home/icon_time.png" alt=""> <span class="timeNum">${time}</span></div>
                    <div class="onlinePeople"><span class="peopleNum">${item.onlineNum}</span>/${item.limit_num}</div>
                </div>
           </div>`
                $('.roomlist').append(room);

                $('.roomlist .room').eq(index).click(function(){
                    $.post(roomInfo,{"id":item.roomId},function (data) {
                        if(data.code != 0 ){
                            alert(data.msg);
                        }else{
                            window.location.href=`./chat.html?roomId=${item.roomId}`
                        }
                    });
                })
                })

            })
        })
    </script>
</body>

</html>